<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滑动门</title>
    <style>
        .wrap{
            width: 800px;
            height: 500px;
            border: 1px solid #333;
        }
        .title{
            display: flex;
            justify-content: space-around;
            width: 100%;
            height: 60px;
            border-bottom: 1px solid red;
        }
        .title .tit{
            flex: 1;
            height: 100%;
            text-align: center;
        }
        .title .hover{
            background-color: skyblue;
        }
        .content{
            padding: 20px;
        }
    </style>
</head>
<body>
    <div id="wrap" class="wrap">
        <div class="title">
            <div onclick="click(0)" class="tit hover">one</div>
            <div onclick="click(1)" class="tit">two</div>
            <div onclick="click(2)" class="tit">three</div>
        </div>
        <div class="content">
            <h3 style="margin: 0; padding: 0;">这是one</h3>
        </div>
    </div>
</body>
<script>
    // // 第一步：分析需求。整个滑动门就是一个对象，拥有两个元素以及方法
    // // 第二步：搭建模型。确认好各自
    // // 第三步：实现功能。
    // window.onload = function(){
    //     let s = new Box("wrap");
    //     // s.event()
    // };
    // class Box {
    //     constructor(id){
    //         this.wrap = document.getElementById(id);
    //         this.title = this.wrap.children[0];
    //         this.content = this.wrap.children[1];
    //     };
    //     this.event = function(){
    //         let event = this.title.children;
    //         for(let i=0;i<event.length; i++){
    //             event[i].onclick = ()=>{
    //                 this.showCont(event[i].textContent)
    //             }
    //         }
    //     };
    //     this.showCont = function(cont){
    //         this.content.children[0].textContent = `这是${cont}`;
    //     }
    // }

    let A = {
        name:"Rex",
        showName:function (){
            console.log(`name is:${this.name}`)
        }
    };
    let B = {
        name:"Xv",
        showName:A.showName
    };
    console.log(B.showName())
</script>
</html>